<template>
	<view class="content">
		<view class="btns">
			<button @click="handleBack">返回</button>
			<button @click="handleSure">确定</button>
		</view>
		<map id="map" class="map" :markers="state.markers" :show-location="true" :latitude="latitude"
			:longitude="longitude" @markertap="handleMarkerTap"></map>
			<view class="address">
				<view :class="['address-item',{active:addr.isActive}]" v-for="addr in state.markers" @click="handleClick(addr)" >
					<text>{{addr.title}}</text>
					<text>{{addr.address}}</text>
				</view>
			</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {onReady} from '@dcloudio/uni-app';
	const latitude = ref(0);
	const longitude = ref(0);
	const state = reactive({
		markers: [{
				id: 1,
				title: "万达影城(成都锦华路万达广场店)",
				address: "四川省成都市锦江区锦华路一段68号成都锦华路万达广场F3",
				phone: "(028)61111012",
				latitude: 30.626515,
				longitude: 104.102515,
				isActive:false,
				callout:{
					content:`名称：万达影城(成都锦华路万达广场店)
						电话：(028)61111012
						地址：四川省成都市锦江区锦华路一段68号成都锦华路万达广场F3
					`
				}
			},
			{
				id: 2,
				title: "万达影城(成都城中城店)",
				address: "四川省成都市青羊区青龙巷36号泰业城中城1号楼2楼",
				phone: "(028)66555588",
				latitude: 30.678103,
				longitude: 104.071435,
				isActive:false
			},
			{
				id: 3,
				title: "万达影城(新城市购物广场店)",
				address: "四川省成都市新都区马超东路266号新城市购物广场F4",
				phone: "(028)66555588",
				latitude: 30.817591,
				longitude: 104.186107,
				isActive:false
			},
			{
				id: 4,
				title: "万达影城(红牌楼店)",
				address: "四川省成都市武侯区佳灵路7号红牌楼广场3号街区2楼",
				phone: "(028)65518023",
				latitude: 30.639734,
				longitude: 104.034582,
				isActive:false
			},
			{
				id: 5,
				title: "成都万达影城(成都蜀都万达广场店)",
				address: "成都市郫都区望丛东路139号成都蜀都万达广场F4",
				phone: "(028)65049893",
				latitude: 30.814241,
				longitude: 103.91376,
				isActive:false
			},
			{
				id: 6,
				title: "万达影城(万达广场成都双流店)",
				address: "成都市双流区星空路999号万达广场F4",
				phone: "13548184172",
				latitude: 30.603077,
				longitude: 103.933802,
				isActive:false
			}
		]
	});
	
	onReady(() => {
		uni.getLocation({
			success(res){
				latitude.value = res.latitude;
				longitude.value = res.longitude;
			}
		})
		 state._mapContext = uni.createMapContext("map", this);
	})
	
	function handleClick(item){
		console.log('item',item);
		state.markers.forEach(addr => addr.isActive = false);
		item.isActive = true;
		state._mapContext.moveToLocation({
			latitude:item.latitude,
			longitude:item.longitude
		});
	}
	function handleMarkerTap(e){
		console.log(e.detail.markerId);
		state.markers.forEach(addr => {
			if(addr.id == e.detail.markerId){
				addr.isActive = true;
				state._mapContext.moveToLocation({
					latitude:addr.latitude,
					longitude:addr.longitude
				});
			}else{
				addr.isActive = false;
			}
		});
	}
	function handleBack(){
		uni.redirectTo({
			url:"/pages/test/test"
		});
	}
	function handleSure(){
		let item = state.markers.filter(item => item.isActive);
		console.log(item);
		uni.redirectTo({
			url:"/pages/test/test?item=" + encodeURIComponent(JSON.stringify(item))
		})
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.btns{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		margin:0;
		padding:0;	
	}
	.map {
		height: 500rpx;
		width: 100%;
	}
	.address{
		flex:1;
	}
	.address>.address-item{
		display: flex;
		flex-direction: column;
		padding:10rpx;
		border-bottom: 1px solid gray;
	}
	.address-item>text:nth-child(1){
		font-size: 40rpx;
	}
	.address-item>text:nth-child(2){
		font-size: 20rpx;
	}
	.active{
		background-color: darkgrey;
	}
</style>
